﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="InsertFTPImage.aspx.cs" Inherits="Editor_FileManage_InsertFTPImage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Quản lý ảnh</title>
</head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script src="/js/colorpicker/js/colorpicker.js" type="text/javascript"></script>
<link href="/js/colorpicker/css/colorpicker.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    #divTemplate label {
        float: left;
        width: 100px;
        border-bottom: 1px solid silver;
    }

    #divTemplate div {
        padding: 5px;
        width: 350px;
        vertical-align: top;
    }

    #divTemplate > div > div {
        float: left;
        width: 230px;
    }

    #divTemplate input {
        width: 230px;
    }

    #divTemplate textarea {
        width: 230px;
    }
</style>

<script type="text/javascript">
    //<![CDATA[
    function OnClientItemSelected(sender, args) {
        var pvwImage = $get("pvwImage");
        var jpathreplace = '<%=pathreplace%>'
        var imageSrc = args.get_item().get_url().replace("?path=" + jpathreplace, "");

        /*get width, height img*/
        var img = new Image();
        img.onload = function () {
            $j("#txtWidth").val(this.width);
            $j("#txtHeight").val(this.height);
            /*resize img*/
            var maxWidth = 310;
            var maxHeight = 300;
            var ratio = 0;
            if (this.width > maxWidth || this.height > maxHeight) {
                if ((maxHeight / this.height) <= (maxWidth / this.width)) {
                    ratio = this.width / this.height;
                    pvwImage.style.width = (maxHeight * ratio) + "px";
                    pvwImage.style.height = maxHeight + "px";
                }
                else {
                    ratio = this.height / this.width;
                    pvwImage.style.width = maxWidth + "px";
                    pvwImage.style.height = (maxWidth * ratio) + "px";
                }
            }
            else if (this.width > maxWidth || this.height > maxHeight) {
                pvwImage.style.width = this.width + "px";
                pvwImage.style.height = this.height + "px";
            }
        }
        img.src = imageSrc;
        pvwImage.src = imageSrc;
        pvwImage.style.display = "";
    }
    //]]>
</script>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <table cellpadding="0" cellspacing="0" width="770px">
            <tr>
                <td style="width: 410px;">
                    <telerik:RadFileExplorer ID="RadFileExplorer1" runat="server" EnableCreateNewFolder="true" 
                        EnableCopy="true" Width="410px" Height="540px" OnClientItemSelected="OnClientItemSelected" EnableOpenFile="false">
                    </telerik:RadFileExplorer>
                </td>
                <td style="vertical-align: top;">
                    <fieldset style="width: 320px; height: 330px">
                        <legend>Xem trước</legend>
                        <img id="pvwImage" src="" alt="" style="display: none; margin: 10px; width: 310px; height: 300px;" />
                    </fieldset>
                    <div style="padding: 5px; width: 350px;">
                        <label for="selAlign" style="float: left; padding-right: 5px;">
                            Vị trí:</label>
                        <div style="float: left; height: 24px;">
                            <select id="selAlign" onchange="PreviewAudio()">
                                <option selected="selected" value="center">Giữa</option>
                                <option value="left">Trái</option>
                                <option value="right">Phải</option>
                            </select>
                        </div>
                    </div>
                    <div style="padding: 5px; clear: left;">
                        Chiều rộng:
                            <input type="text" id="txtWidth" value="300" onchange="if(IsDigit(this, width)) PreviewImage();}"
                                style="width: 40px;" />&nbsp;&nbsp; Chiều cao:
                            <input type="text" id="txtHeight" value="174" onchange="if(IsDigit(this, height))  PreviewImage();}"
                                style="width: 40px;" />&nbsp;&nbsp;
                            <input type="checkbox" id="chkConstrains" name="chkConstrains" checked="checked"
                                onclick="CheckConstrains();" />
                        Ràng buộc
                    </div>
                    <div style="padding: 5px; clear: left;">
                        Viền:
                            <input type="text" id="txtBorderWidth" value="0" onchange="PreviewImage()" style="width: 80px" />
                        &nbsp;&nbsp; Mầu viền:
                            <input type="text" id="txtBorderColor" value="#ff0000" onchange="PreviewImage()"
                                maxlength="7" style="width: 80px;" />
                    </div>
                    <div style="padding: 5px;">
                        <input type="radio" name="imgTemplate" value="NoTemplate" checked="checked" onclick="document.getElementById('divTemplate').style.display = 'none';" />Không
                            dùng Template &nbsp;&nbsp;
                            <input type="radio" name="imgTemplate" value="UsingTemplate" onclick="document.getElementById('divTemplate').style.display = 'block';" />Dùng
                            Template
                    </div>
                    <div id="divTemplate" style="padding: 5px; display: none;">
                        <div style="padding: 5px;">
                            <label for="txtAuthor">
                                Tác giả:</label>
                            <div>
                                <input type="text" id="txtAuthor" name="txtAuthor" />
                            </div>
                        </div>
                        <div style="padding: 5px;">
                            <label for="txtSource">
                                Nguồn:</label>
                            <div>
                                <input type="text" id="txtSource" name="txtSource" />
                            </div>
                        </div>
                        <div style="padding: 5px;">
                            <label for="txtDescription">
                                Chú thích:</label>
                            <div>
                                <textarea id="txtDescription" rows="2"></textarea>
                            </div>
                        </div>
                    </div>
                    <input type="button" id="btnInsert" value="Chèn" onclick="Insert()" style="width: 80px;" />
                    <input type="button" id="btnCancel" value="Đóng lại" onclick="Cancel()" style="width: 80px; margin-left: 5px;" />
                </td>
            </tr>
        </table>
    </form>
    <script language="javascript" type="text/javascript">
        function openWin(radWindow, url, title) {
            var oWnd = radopen(url, radWindow);
            oWnd.set_title(title);
        }
    </script>

    <!-- javascript -->

    <script type="text/javascript" language="javascript">
        var $j = jQuery.noConflict();

        // variables
        var imageID, url, align, borderWidth, borderColor, width, height, author, source, description;
        var originWith, originHeight;

        function getAllArgs() {
            url = $j("#pvwImage").attr("src");
            align = $j("#selAlign option:selected").val();
            borderWidth = $j("#txtBorderWidth").val();
            borderColor = $j("#txtBorderColor").val();
            width = $j("#txtWidth").val();
            height = $j("#txtHeight").val();
            author = $j("#txtAuthor").val();
            source = $j("#txtSource").val();
            description = $j("#txtDescription").val();
        }

        // init color picker
        $j(document).ready(function () {
            $j("#txtBorderColor").ColorPicker({
                color: "#0000ff",
                onShow: function (colpkr) {
                    $j(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    PreviewImage();
                    $j(colpkr).fadeOut(500);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    $j("#txtBorderColor").css("backgroundColor", "#" + hex);
                    $j("#txtBorderColor").val("#" + hex);
                }
            });

        });

        // get current window
        function GetRadWindow() {
            if (window.radWindow) {
                return window.radWindow;
            }

            if (window.frameElement && window.frameElement.radWindow) {
                return window.frameElement.radWindow;
            }
            return null;
        }

        // Check delete all row
        function CheckAll(value) {
            var lstCheckbox = document.getElementsByTagName("input");
            for (i = 0; i < lstCheckbox.length; i++) {
                if ((lstCheckbox[i].type == 'checkbox') && (lstCheckbox[i].id.indexOf('chkDelete') > 0))
                    lstCheckbox[i].checked = value;
            }
        }

        // Selected row on grid image
        function RowSelected(sender, args) {
            // bind data to variables
            //imageID = args.getDataKeyValue("ImageID");

            url = args.getDataKeyValue("Url");
            
            var img = new Image()
            img.src = url;
            originWith = img.width;
            originHeight = img.height;

            if (!isNaN($j("#txtWidth").val())) {
                $j("#txtWidth").val(originWith);
            }

            if (!isNaN($j("#txtHeight").val())) {
                $j("#txtHeight").val(originHeight);
            }

            // preview image
            PreviewImage();
        }

        // Preview image
        function PreviewImage() {
            // bind data to variables
            getAllArgs();

            $j("#tblPreview").attr("align", align);

            // preview image
            var previewHTML = "<img alt='" + description + "' " +
                                " src='" + url + "' " +
                                "style=\"width:" + width + "px;height:" + height + "px;border: solid " + borderWidth + "px " + borderColor + ";\" />";


            $j("#preview").html(previewHTML);
        }

        // Is Using Template
        function IsUsingTemplate() {
            chosen = ""
            len = document.getElementsByName("imgTemplate").length;

            for (i = 0; i < len; i++) {
                if (document.getElementsByName("imgTemplate")[i].checked) {
                    chosen = document.getElementsByName("imgTemplate")[i].value;
                }
            }

            if (chosen == "NoTemplate") {
                return false;
            }
            else {
                return true;
            }
        }

        // Do insert
        function Insert() {
            // create object argument
            var oArg = new Object();

            // bind data to variables
            getAllArgs();

            // init object properties
            oArg.ImageID = imageID;
            oArg.Url = url;
            oArg.Description = description;
            oArg.Author = author;
            oArg.Source = source;
            oArg.Width = width;
            oArg.Height = height;
            oArg.Align = align;
            oArg.BorderWidth = borderWidth;
            oArg.BorderColor = borderColor;
            oArg.IsCancel = false;
            oArg.IsUsingTemplate = IsUsingTemplate();

            // return object
            var oWindow = GetRadWindow();
            GetRadWindow().close(oArg);
        }

        // Do cancel
        function Cancel() {
            // create object argument
            var oArg = new Object();
            // init object properties
            oArg.IsCancel = true;
            // return object
            var oWindow = GetRadWindow();
            GetRadWindow().close(oArg);
        }

        // Check value is digit
        // obj: Control to validate
        function IsDigit(obj, value) {
            var regNumber = new RegExp("[0-9]", "g");
            if (!regNumber.test(obj.value)) {
                alert("Dữ liệu không hợp lệ!");
                obj.value = value;
                return false;
            };
            return true;
        }

        // Toggle width, height constrains
        // constrains: type of value to constrains
        function ToggleConstrains(constrains) {
            if ($j("#chkConstrains:checked").val() == "on") {
                switch (constrains) {
                    case "width":
                        $j("#txtHeight").val($j("#txtWidth").val() * height / width);
                        break;
                    case "height":
                        $j("#txtWidth").val($j("#txtHeight").val() * width / height);
                        break;
                }
            }
        }

        // Check width-height contrains
        function CheckConstrains() {
            if ($j("#chkConstrains:checked").val() == "on")
                $j("#imgLock").css("display", "block");
            else
                $j("#imgLock").css("display", "none");
        }
    </script>
</body>
</html>
